
    <style scoped>
        .layout{
            border: 1px solid #d7dde4;
            background: #f5f7f9;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
        }
        .layout-header-bar{
            background: #fff;
            box-shadow: 0 1px 1px rgba(0,0,0,.1);
        }
    </style>
    <template>
        <div class="layout">
            <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
                <Menu :accordion="true" active-name="1" :theme="theme" width="auto"  :open-names="['1']">
                    <div  v-for="(menu,index) in menus" :key="index">
                        <Submenu :name="index">
                            <template slot="title">
                                <Icon :type="menu.icon" />
                                {{menu.name}}
                            </template>
                            <div v-for="(child,childIndex) in menu.menus" :key="childIndex">
                                <MenuItem :name="childIndex" :to="child.url">{{child.name}}</MenuItem>
                            </div>
                        </Submenu>
                    </div>

                </Menu>
            </Sider>
            <Layout :style="{marginLeft: '200px'}">
                <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                    <span style="float:right"><img src="../../assets/logo.png" width="40px" height="40px"/>个人中心</span>
                </Header>
                <router-view></router-view>
            </Layout>
        </div>
</template>
<script>
    export default {
        data() {
            return {
                isCollapsed: false,
                theme: 'dark',//light,dark
                menus: [
                    {
                        name: '控制台',
                        icon: 'ios-home',
                        menus: [ {
                            name: '首页',
                            checked: 2 - 1,
                            url: '/admin/index'
                        }]
                    },
                    {
                        name: '用户',
                        icon: 'ios-people',
                        menus: [
                            {
                                name: '用户管理',
                                url: '/admin/user'
                            }, {
                                name: '添加用户',
                                url: '/admin/user/add'
                            }
                        ]
                    },{
                        name: '菜单',
                        icon: 'ios-menu',
                        menus: [
                            {
                                name: '菜单管理',
                                url: '/admin/menu'
                            }
                        ]
                    },{
                        name: '文章',
                        icon: 'ios-book',
                        menus: [
                            {
                                name: '文章管理',
                                url: '/admin/article'
                            }, {
                                name: '发表文章',
                                url: '/admin/article/add'
                            }
                        ]
                    },{
                        name: '留言',
                        checked: 2,
                        icon: 'ios-chatboxes',
                        menus: [
                            {
                                name: '留言管理',
                                url: '/admin/article'
                            }
                        ]
                    },{
                        name: '评论',
                        checked: 2,
                        icon: 'ios-people',
                        menus: [
                            {
                                name: '评论管理',
                                url: '/admin/article'
                            }, {
                                name: '评论文章',
                                url: '/admin/article/add'
                            }
                        ]
                    },{
                        name: '友链',
                        checked: 2,
                        icon: 'ios-people',
                        menus: [
                            {
                                name: '友链管理',
                                url: '/admin/article'
                            }, {
                                name: '添加友链',
                                url: '/admin/article/add'
                            }
                        ]
                    },{
                        name: '关于我',
                        checked: 2,
                        icon: 'ios-people',
                        menus: [
                            {
                                name: '关于我管理',
                                url: '/admin/article'
                            }
                        ]
                    }]
            };
        },
        computed: {
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        }
    }
</script>
